<template>
  <div>
    <el-card shadow="never" style="margin: 30px">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <el-form
        :model="seach"
        ref="form"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-row :gutter="24">
          <el-col :span="6" :offset="0">
            <el-form-item label="班级名称">
              <el-input v-model="seach.className"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="宿舍类型">
              <el-select
                v-model="seach.type"
                style="width: 100%"
                placeholder="请选择班级"
              >
                <el-option
                  v-for="item in clazzOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="开班时间">
              <el-date-picker
                v-model="seach.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="seach.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <el-form-item>
              <el-button>取消</el-button>
              <el-button type="primary" @click="cha">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="never" style="margin: 30px">
      <div slot="header">
        <el-button type="primary" size="mini" @click="goadd">新增</el-button>
      </div>
      <el-table :data="clazzlist" border>
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column prop="className" label="班级名称" width="120">
        </el-table-column>

        <el-table-column prop="type" label="宿舍类型" width="120">
        </el-table-column>
        <el-table-column prop="startTime" label="入住时间" width="220">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="220">
        </el-table-column>
        <el-table-column prop="desc" label="班级描述" width="220">
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row.id)"
              type="text"
              size="small"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="edit(scope.row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Page.start"
        :page-sizes="Page.sizes"
        :page-size="Page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Page.totalCount"
        style="text-align: right; margin-top: 30px"
      >
      </el-pagination>
    </el-card>
    ,
    <Detal ref="detal" @getclazzlist="getclazzlist"></Detal>
  </div>
</template>

<script>
import Detal from "./clazzdetal/index";
import _ from "lodash";
import ClassApi from "@/api/reallclazz/index";
export default {
  components: {
    Detal,
  },
  data() {
    return {
      seach: {},
      clazzlist: [],
      Page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        totalCount: 0,
      },
      clazzOption: [
        {
          value: "0",
          label: "前端",
        },
        {
          value: "1",
          label: "UI",
        },
      ],
    };
  },
  created() {
    this.getclazzlist();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.Page.limit = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.Page.start = val;
    },
    getclazzlist() {
      var params = {
        start: this.Page.start,
        limit: this.Page.limit,
        ...this.seach,
      };
      params = _.pickBy(params, (item) => item);
      ClassApi.clazzlist(params).then((res) => {
        console.log(res);
        for (var i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].type == "0") {
            res.data.list[i].type = "前端";
          }
          if (res.data.list[i].type == "1") {
            res.data.list[i].type = "UI";
          }
         
        }
        this.clazzlist = res.data.list;
      });
    },
    //编辑
    edit(id) {
      this.$refs.detal.opendialog(id);
    },
    //删除
    handleClick(id) {
      ClassApi.clazzdel({ id }).then((res) => {});
      this.getclazzlist();
    },
    //查询
    cha() {},
    //新增
    goadd() {
      this.$refs.detal.opendialog();
    },
  },
};
</script>
<style scoped  lang='scss'>
</style>